<template>
  <div id="main-container">
    <el-steps :active="activeStep" align-center>
      <el-step title="步骤 1：房源理由" icon="el-icon-edit">
      </el-step>
      <el-step title="步骤 2：填写地址" icon="el-icon-upload"></el-step>
      <el-step title="步骤 3：身份验证" icon="el-icon-picture"></el-step>
    </el-steps>
    <div id="main-body">
      <el-row :gutter="10">
        <el-col :span="20">
          <!-- 房源理由 FORM CODE START -->
          <el-form ref="stepOneForm" :model="stepOneForm" label-width="100px" v-if="activeStep === 1">
          <p>
            <h3>请选择适用于您房源的理由</h3>
            <p>
              在以下几种情况下，您可能无需为房源提供通知书编号。如果您的房源属于这些类型，您需要选择以下一个选项来告知我们，才能继续出租。请注意：提供虚假信息将会受到严厉处罚。请确保此信息准确无误，并与您提交的文件内容完全一致。
            </p>
          </p>
          <el-divider></el-divider>
          <el-radio-group v-model="stepOneForm.agreement">
            <el-radio  :label="1">《住宅宿泊事业法》</el-radio>
            <el-divider></el-divider>
            <el-radio  :label="2">《特别经济区划法案》</el-radio>
            <el-divider></el-divider>
            <el-radio :label="3">地方政府特别许可（活动型民宿和农家乐）</el-radio>
          </el-radio-group>
          <el-divider></el-divider>
          <p>
              <h3>特别经济区划分法案详细信息</h3>
              <p>
                <h4>许可证号码</h4>
                <span class="input-desc">请确保此信息与您许可证上的信息完全一致（注意：这不是设施编号）。</span>
                <el-input class="input-desc" v-model="stepOneForm.liscenseNum"  placeholder="请输入许可证号码"></el-input>
              </p>
              <p>
              <h4>您的姓名、商号或公司名称</h4>
              <span >请确保此信息与您提交的许可证上的信息完全一致。例如，请不要省略[Kabushiki Kaisha] 等信息。此信息不会显示在您的房源页面上。</span>
              <el-input class="input-desc" v-model="stepOneForm.name"  placeholder="请输入您的姓名、商号或公司名称"></el-input>
              </p>
            </p>
            <el-row style="text-align: center">
              <el-button type="primary" round size="medium" class="btn-stepNext" @click="nextStep()">下一步</el-button>
            </el-row>
          </el-form><!-- 房源理由 FORM CODE END -->

          <!-- 填写地址 FORM CODE START -->
          <el-form ref="stepOneForm" :model="stepOneForm" label-width="100px" v-if="activeStep === 2">
            <p>
              <h3>请确认您的详细地址</h3>
              <p>
                请确保您在此处添加的地址与您提交的文件上的地址一致。如果您的地址信息中含有门牌或公寓号码，请别忘了提供这部分信息。如果地址与通知书申请中显示的房源地址不一致，您的房源可能会被视为非法房源并删除。
              </p>
            </p>
            <el-divider></el-divider>
            <p>
            <h4>邮政编码</h4>
            <el-input class="input-desc" v-model="stepOneForm.liscenseNum"  placeholder="请输入邮政编码"></el-input>
            </p>
            <p>
            <h4>县</h4>
            <el-input class="input-desc" v-model="stepOneForm.liscenseNum"  placeholder="请输入县"></el-input>
            </p>
            <p>
            <h4>城市和城区</h4>
            <el-input class="input-desc" v-model="stepOneForm.liscenseNum"  placeholder="请输入城市和城区"></el-input>
            </p>
            <p>
            <h4>地址行</h4>
            <el-input class="input-desc" v-model="stepOneForm.liscenseNum"  placeholder="请输入地址行"></el-input>
            </p>
            <p>
            <h4>大楼名称</h4>
            <span class="input-desc">添加在此的信息必须是您的地址信息</span>
            <el-input class="input-desc" v-model="stepOneForm.liscenseNum"  placeholder="请输入大楼名称"></el-input>
            </p>
            <p>
            <h4>房间号</h4>
            <span >添加在此的信息必须是您的地址信息</span>
            <el-input class="input-desc" v-model="stepOneForm.name"  placeholder="请输入房间号"></el-input>
            </p>
            </p>
            <el-row style="text-align: center">
              <el-button type="danger" round size="medium" class="btn-stepNext" @click="prevStep()">上一步</el-button>
              <el-button type="primary" round size="medium" class="btn-stepNext" @click="nextStep()">下一步</el-button>
            </el-row>
          </el-form><!-- 填写地址 FORM CODE END -->

          <!-- 步骤 3：身份验证 FORM CODE START -->
          <el-form ref="stepOneForm" :model="stepOneForm" label-width="100px" v-if="activeStep === 3">
            <p>
            <h3>身份信息验证</h3>
            <p>
              身份信息验证过的房东，可以让住客感到更可靠安全。您可以通过手持身份证/护照/驾照来完成身份验证。
            </p>
            </p>

            <p>
              <h4>住宿决策人</h4>
              <p>
              <h4><span class="input-required">*</span>姓名</h4>
              <el-input class="input-desc" v-model="stepOneForm.liscenseNum"  placeholder="请输入姓名"></el-input>
              </p>
            </p>

            <p>
            <h4><span class="input-required">*</span>邮箱</h4>
            <el-input class="input-desc" v-model="stepOneForm.liscenseNum"  placeholder="请输入邮箱"></el-input>
            </p>

            <p>
            <h4><span class="input-required">*</span>手机</h4>
            <el-input placeholder="请输入手机" v-model="stepOneForm.liscenseNum" class="input-with-select">
              <el-select v-model="stepOneForm.phoneArea" slot="prepend" placeholder="请选择区号" size="medium" style="width: 100px;">
                <el-option label="+81" value="81"></el-option>
                <el-option label="+86" value="86"></el-option>
                <el-option label="+66" value="66"></el-option>
              </el-select>
            </el-input>
            </p>

            <p>
            <h4><span class="input-required">*</span>证件种类</h4>
              <el-select  v-model="stepOneForm.idType" placeholder="请选择证件种类" style="width: 100%;">
                <el-option label="身份证" value="1"></el-option>
                <el-option label="护照" value="2"></el-option>
                <el-option label="驾照" value="3"></el-option>
              </el-select>
            </p>

            <p>
              <span class="input-desc">非日本地区房源:请如图示上传您手持护照个人信息页或身份证正面的照片，证件所有文字需清晰可见。</span><br/>
              <span class="input-desc">日本地区房源：请上传合法运营资质照片（无需手持）1/3。</span>
              <p class="upload-group">
                <el-row>
                  <el-col :span="8">
                    <div class="photo-wrap">
                       <el-row >
                         <el-col :span="24">
                           <el-button type="primary" plain @click="openUpload(1)">上传证件</el-button>
                           <el-avatar shape="square" :size="150" src="/static/img/person-upload.jpg"></el-avatar>
                         </el-col>
                       </el-row>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="photo-wrap">
                      <el-row >
                        <el-col :spadn="24"><!-- openUpload -->
                          <el-button type="primary" plain @click="openUpload(2)">上传运营资质</el-button>
                          <el-avatar shape="square" :size="150" src="/static/img/hotel-upload.jpg"></el-avatar>
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                    </div>
                  </el-col>
                </el-row>
              </p>
            </p>
            <el-row style="text-align: center">
              <el-button type="danger" round size="medium" class="btn-stepNext" @click="prevStep()">上一步</el-button>
              <el-button type="primary" round size="medium" class="btn-stepNext" @click="nextStep()">提交资料</el-button>
            </el-row>
          </el-form><!-- 步骤 3：身份验证 FORM CODE END -->
        </el-col>
        <el-col :span="4">
          <el-avatar shape="square" :size="150" src="/static/img/mingsu.jpg"></el-avatar>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<!--
  房源上新界面（2）
  对应文档 FUNKEY FM3 前端（1）.docx 功能的：  房源上新界面（2）
-->
<script>
    import Vue from 'vue'
    //import { Button, Select } from 'element-ui';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import moment from 'moment'//导入文件
    Vue.prototype.$moment = moment;//赋值使用
    Vue.use(ElementUI);
    export default {
        name: "NewHourseSourceAdd",
        components: {},
        mixins: [],
        data() {
            return {
              activeStep: 1,
              dialogVisible: false, //上传弹窗显示或隐藏
              uploadType: 0, //上传类型 [1:上传证件,2:上传合法运营资质]
              stepOneForm:{
                agreement: 1,
                liscenseNum:'',
                name:'',
                phoneArea:'86',
                idType:'1'
              }
            }
        },
        methods: {
          nextStep(){
            console.log('nextStep...');
            if (this.activeStep++ > 2) this.activeStep = 0;
          },
          prevStep(){
            console.log('nextStep...');
            if (this.activeStep > 1) this.activeStep--;
          },
          /**
           * 打开上传弹窗
           * @param bussType
           */
          openUpload(uploadType){
            this.uploadType = uploadType;
            this.dialogVisible = true;
          },
          handleClose(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
          },
          handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
          },
          beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
          }
        }
    }

</script>


<style lang="less" scoped>
  body{
    overflow: hidden;
  }
  #main-container {
    padding: 1rem;
    border: 1px solid #ebeef5;
    background-color: white;
  }

  #main-body{
    width: 1000px;
    text-align: left;
    margin:0 auto;
    /*border: 1px solid #00ff00;*/
  }

  #main-body el-row{
    text-align: center;
  }

  .el-radio-group{
    width: 100%;
  }

 #main-body  H3{
      font-weight: 700;
  }

 #main-body h4{
   font-weight: 700;
 }

 .input-desc{
   margin-top: 10px;
 }

 .input-required{
  color:red;
   margin-right: 5px;
 }

  .upload-group{
    /*background-color: #0a6aa1;*/
  }

  input[type=file] {
    display: none;
  }
  .el-upload__input {
    display: none;
  }

  .photo-wrap{
   width: 190px;margin: 0 auto;padding: 0px 20px 0px 20px;
    border: 1px dashed darkgray;
    text-align: center;
  }

  .photo-wrap .el-button{
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .btn-stepNext{
    width: 250px;
    height: 45px;
  }
</style>
